import React from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import qs from 'qs';

import { addTab } from '@/utils/utils';
import { Form } from '@ant-design/compatible';
import PageHeader from '@/components/PageHeader';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Card,
  Row,
  Col,
  Button,
  Select,
} from 'antd';

import '@ant-design/compatible/assets/index.css';

const { Option } = Select;

const titleStyle: any = {
  lineHight: '60px',
  fontSize: 26,
  textAlign: 'center',
};

interface SearchGoodsProps extends FormComponentProps {
  dispatch: Dispatch;
  INITINFO: any;
}

@connect(({ common: { INITINFO } }: any) => ({ INITINFO }))

class SearchGoodsElem extends React.Component<SearchGoodsProps> {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'common/fetchLogisList' });
  }

  handleSelectGoods = (e: React.FormEvent) => {
    e.preventDefault();

    const { form: { validateFields } } = this.props;
    validateFields((errors, values) => {
      if (errors) return;

      const { logis: id } = values;
      const { INITINFO: { logisList } } = this.props;
      const logisticsItem = logisList.find((item: any) => item.id === id);

      const params = { id, logisName: logisticsItem.name };
      const { dispatch } = this.props;
      addTab(dispatch, {
        name: `${logisticsItem.name}货架管理`,
        url: `/basic/goodsManagement/list/add?${qs.stringify(params)}`,
      });
    });
  };

  render() {
    const {
      form: { getFieldDecorator },
      INITINFO: { logisList },
    } = this.props;

    return (
      <>
        <PageHeader />

        <Card
          bordered={false}
          className="card_paddB0"
          style={{ height: 'calc(100vh - 74px)', paddingTop: '4%' }}
        >
          <h2 style={titleStyle}>货架管理（新）</h2>
          <Form
            hideRequiredMark
            className="tableListForm"
            onSubmit={this.handleSelectGoods}
          >
            <Row
              gutter={{ md: 8, xl: 24, lg: 48 }}
              justify="center"
              style={{ paddingTop: '4%' }}
            >
              <Col md={8} sm={24}>
                <Form.Item label="物流中心" colon={false}>
                  {getFieldDecorator('logis', {
                    rules: [{ required: true, message: '请选择物流中心' }],
                  })(
                    <Select
                      showSearch
                      allowClear
                      placeholder="请选择"
                      filterOption={(input: any, option: any) => (
                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                      )}
                    >
                      {logisList.map((item: any) => (
                        <Option value={item.id} key={item.id}>
                          {item.name}
                        </Option>
                      ))}
                    </Select>,
                  )}
                </Form.Item>
              </Col>
            </Row>
            <Row
              gutter={{ md: 8, xl: 24, lg: 48 }}
              justify="center"
              style={{ paddingTop: '4%', textAlign: 'center' }}
            >
              <Col
                md={8}
                sm={24}
                className="mobileT"
              >
                <Button
                  type="primary"
                  htmlType="submit"
                  size="large"
                  style={{ padding: '0 100px' }}
                >
                  进入
                </Button>
              </Col>
            </Row>
          </Form>
        </Card>
      </>
    );
  }
}
export default Form.create<SearchGoodsProps>()(SearchGoodsElem);
